<template>
  <view class="">
    <text>{{ id }}</text> -
    <text>{{ title }}</text> -
    <text>{{ completed ? '已' : '未' }}完成</text> -
    <button type="default" size="mini" @click="handleModify">修改</button>
    <button type="default" size="mini" @click="removeTodoItem({id})">删除</button>
  </view>
</template>

<script>
  import { mapMutations } from 'vuex'
  export default {
    // props: ['id', 'title', 'completed']
    props: {
      id: {
        type: Number
      },
      title: String,
      completed: Boolean
    },
    methods: {
      ...mapMutations(['removeTodoItem']),
      handleModify() {
        console.log('修改', this.$store)
        this.$store.commit('toggleTodoItem', { id: this.id })
      }
    }
  }
</script>

<style>
</style>
